<template>
	<div class="outerFrame">
		<el-row>
			<el-col :span="24">
				<el-card class="box-card">
					<div slot="header" class="clearfix"><span>服务器信息</span></div>
					<div style="height: 100%;display: flex;" class="osInfo">
						<div>
							<div id="cpu"></div>
							<div>
								<div id="cpuUse"></div>
								<div>cpu使用情况</div>
							</div>
						</div>
						<div>
							<div id="OsMemory"></div>
							<div>
								<div id="OsMemUse"></div>
								<div>系统内存使用情况</div>
							</div>
						</div>
						<div>
							<div id="JvmMemory"></div>
							<div>
								<div id="JvmMemUse"></div>
								<div>jvm内存使用情况</div>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="12">
				<el-card class="box-card">
					<div slot="header" class="clearfix"><span>操作系统信息</span></div>
					<div style="height:95%;">
						<table class="el-table el-table--fit el-table--striped el-table--border el-table--enable-row-transition">
							<tbody>
								<tr>
									<td>操作系统名</td>
									<td id="osName"></td>
								</tr>
								<tr>
									<td>操作系统架构</td>
									<td id="osArch"></td>
								</tr>
								<tr>
									<td>处理器</td>
									<td id="cpuModel"></td>
								</tr>
								<tr>
									<td>处理器核心数量</td>
									<td id="cpuCores"></td>
								</tr>
								<tr>
									<td>内存</td>
									<td id="totalMemory"></td>
								</tr>
							</tbody>
						</table>
					</div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card class="box-card">
					<div slot="header" class="clearfix"><span>jvm信息</span></div>
					<div style="height:95%;">
						<table class="el-table el-table--fit el-table--striped el-table--border el-table--enable-row-transition">
							<tbody>
								<tr>
									<td>jvm使用处理器数量</td>
									<td id="availableProcessors"></td>
								</tr>
								<tr>
									<td>java运行版本</td>
									<td id="javaVersion"></td>
								</tr>
								<tr>
									<td>jvm规范版本</td>
									<td id="specVersion"></td>
								</tr>
								<tr>
									<td>jvm运行版本</td>
									<td id="jvmVersion"></td>
								</tr>
								<tr>
									<td>jvm内存</td>
									<td id="jvmTotalMemory"></td>
								</tr>
							</tbody>
						</table>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>
<script>
import 'echarts/lib/chart/bar';
import utils from 'util/utils.js';
import constant from 'util/constant.js';
import api from 'api/system/systeminfo/systeminfo.js';

export default {
	name: 'systeminfo',
	data() {
		return {
			listLoading: true,
			cpuInfo: [
				{
					value: 0,
					name: '已使用'
				},
				{
					value: 0,
					name: '未使用'
				}
			],
			osMemory: [
				{
					value: 0,
					name: '已使用'
				},
				{
					value: 0,
					name: '未使用'
				}
			],
			jvmInfo: [
				{
					value: 0,
					name: '已使用'
				},
				{
					value: 0,
					name: '未使用'
				}
			],
			constant: constant,
			//定时器对象
			t: null,
			request: utils.newRequest()
		};
	},
	methods: {
		//获取数据
		list() {
			this.listLoading = true;
			api.getOsInfo(this.request, response => {
				if (response.data) {
					this.listLoading = false;
					var osInfo = response.data.osInfo;
					var cpuInfo = response.data.cpuInfo;
					var osMemory = response.data.osMemory;
					var jvmInfo = response.data.jvmInfo;
					$('#osName').html(osInfo.osName);
					$('#osArch').html(osInfo.osArch);
					$('#cpuModel').html(cpuInfo.model);
					$('#cpuCores').html(cpuInfo.totalCores);
					$('#javaVersion').html(jvmInfo.javaVersion);
					$('#availableProcessors').html(jvmInfo.availableProcessors);
					$('#jvmVersion').html(jvmInfo.jvmVersion);
					$('#specVersion').html(jvmInfo.specVersion);
					$('#jvmTotalMemory').html((jvmInfo.memoryTotal / 1024 / 1024).toFixed(0) + 'M');
					$('#totalMemory').html((osMemory.memoryTotal / 1024 / 1024 / 1024).toFixed(2) + 'G');
					//渲染内存和cpu信息
					$('#OsMemUse').html((osMemory.memoryUsed / 1024 / 1024 / 1024).toFixed(2) + 'G/' + (osMemory.memoryTotal / 1024 / 1024 / 1024).toFixed(2) + 'G');
					$('#JvmMemUse').html((jvmInfo.memoryUsed / 1024 / 1024).toFixed(0) + 'M/' + (jvmInfo.memoryTotal / 1024 / 1024).toFixed(0) + 'M');
					//cpu信息
					this.cpuInfo = [
						{
							value: cpuInfo.combined,
							name: '已使用'
						},
						{
							value: cpuInfo.idle,
							name: '未使用'
						}
					];
					//内存信息
					this.osMemory = [
						{
							value: osMemory.memoryUsed,
							name: '已使用'
						},
						{
							value: osMemory.memoryFree,
							name: '未使用'
						}
					];
					//内存信息
					this.jvmInfo = [
						{
							value: jvmInfo.memoryUsed,
							name: '已使用'
						},
						{
							value: jvmInfo.memoryFree,
							name: '未使用'
						}
					];
					this.makePiePicture('cpu', 'cpu使用情况', this.cpuInfo);
					this.makePiePicture('OsMemory', '系统内存使用情况', this.osMemory);
					this.makePiePicture('JvmMemory', 'jvm内存使用情况', this.jvmInfo);
				}
			});
		},
		makePiePicture(dom, title, data) {
			// 基于准备好的dom，初始化echarts实例
			var myChart = this.$echarts.init(document.getElementById(dom));
			var title = title ? title : '';
			var used = ((data[0].value / (data[0].value + data[1].value)) * 100).toFixed(2);
			//初始绿色
			var color = '#20a53a';
			if (used > 50) {
				color = '#f7f145';
			}
			if (used > 75) {
				color = '#bd3333';
			}
			// 指定图表的配置项和数据
			var option = {
				//鼠标悬停显示信息框
				title: [
					{
						text: '{name|' + data[0].name + '}\n ' + used + '%',
						top: 'center',
						left: 'center',
						textStyle: {
							rich: {
								name: {
									fontSize: 14,
									fontWeight: 'normal',
									color: '#666666',
									padding: [10, 0]
								}
							}
						}
					}
				],
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b}:  {d}%'
				},
				//饼状图
				series: [
					{
						name: title,
						type: 'pie',
						radius: ['80%', '90%'],
						//数据
						data: data ? data : [],
						//默认外部显示
						label: {
							show: false,
							position: 'center',
							fontSize: '24',
							formatter: '{b}\n{d}%'
						},
						//默认外部线显示
						labelLine: {
							show: false
						}
					}
				],
				//扇形颜色
				color: [color, '#cccccc']
			};
			if (data) {
				myChart.setOption(option);
			}
		}
	},
	mounted() {
		this.list();
		this.t = setInterval(this.list, 3000);
	},
	beforeDestroy() {
		// 组件销毁前调用
		clearInterval(this.t);
	}
};
</script>

<style lang="scss" scoped="scoped">
@import '~common/custom/css/common.scss';
@import '~common/custom/css/systeminfo/list.scss';
</style>
